import React, { Component } from 'react';
import axios from 'axios';

export default class Search extends Component {
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={el => this.iptEle = el} type="text" placeholder="enter the name you search" />&nbsp;
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        )
    }

    search = () => {
        const { getUserContent } = this.props;//拿到父组件的数据
        //获取用户输入的被搜索的内容
        const { value } = this.iptEle;
        console.log(value);

        //发送axios请求
        axios.get('https://api.github.com/search/users', {
            params: {
                q: value,
            }
        })
            .then(res => {
                // console.log(res);//{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
                const userItems = res.data.items;//根据搜索内容拿到一个对象数组
                console.log(userItems);
                //调用父组件的方法并且传参，把根据搜索内容搜到的对象数组给父组件，并且改变状态
                getUserContent(userItems);
                
                
               
            })
            .catch(reason => {
                console.log(reason);
            })

            
           
    }

    




}
